<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="form">
        <div class="input-group">
            <lable>用户名</lable>
            <input type="text" class="user">
            <span class="user_tips"></span>
        </div>

        <div class="input-group">
            <input type="submit" class="btn" value="验证">
        </div>
    </div>
</body>
<script>
    // 用户名
    // 由数字 字母 _ 组成, 6-12位, 切不能以数字开头

    // 安装从易到难的顺序:
    // a. 6-12位
    // b. 切不能以数字开头
    // c. 由数字 字母 _ 组成 => 所有的字符都要在(数字 字母 _ )范围内 => 不在此范围内就是非法字符


    // 1. 获取元素
    // 通过class名获取元素,并取出数组中的第一个
    var userInp = document.getElementsByClassName("user")[0];
    var userTips = document.getElementsByClassName("user_tips")[0];
    var btn = document.getElementsByClassName("btn")[0];
    console.log(userInp, userTips, btn);



    var numList = [];
    for (var i = 48; i <= 57; i++) {
        var char = String.fromCharCode(i);
        numList.push(char);
    }

    var bigList = [];
    for (var i = 65; i <= 90; i++) {
        var char = String.fromCharCode(i);
        bigList.push(char);
    }

    var smallList = [];
    for (var i = 97; i <= 122; i++) {
        var char = String.fromCharCode(i);
        smallList.push(char);
    }

    var speList = ["_"]; //允许使用的特殊字符

    var normalList = numList.concat(bigList, smallList, speList);
    console.log(normalList);


    // 2. 绑定点击事件
    btn.onclick = function () {

        // 3. 取值
        var user = userInp.value;
        console.log(user);

        // 4. 验证
        // a.6-12位
        if (user.length >= 6 && user.length <= 12) {
            console.log("len ok!");

            // b.不能以数字开头

            // b1. 获取第一个字符对应的编码
            // var firstCharCode = user.charCodeAt(0); // 下标为0的字符对应的编码
            // if (!(firstCharCode >= 48 && firstCharCode <= 57)) { // 非数字
            //     console.log("开头 ok!");

            // } else {
            //     userTips.innerText = "用户名不能以数字开头";
            //     userTips.style.color = "red";
            //     userTips.style.fontSize = "12px";
            // }

            // b2. 获取第一个字符 => 判断是否是数字(isNaN)
            // isNaN() 判断传入的参数是否是非数字   是非数字 => true  是数字返回false

            var firstChar = user.charAt(0);
            if (isNaN(firstChar)) {
                console.log("开头 ok!");

                // c. 由数字 字母 _ 组成 => 所有的字符都要在(数字 字母 _ )范围内 => 不在此范围内就是非法字符

                var flag = true; // 假设所有的字符都在合法范围内(由数字 字母 _ 组成)
                for (var i = 0; i < user.length; i++) {
                    var char = user.charAt(i);

                    if (normalList.indexOf(char) == -1) { // 有一个不满足条件(存在非法字符) -> 推翻假设
                        flag = false;
                        break;
                    }
                }

                if (flag) {
                    userTips.innerText = "√";
                    userTips.style.color = "green";
                    userTips.style.fontSize = "12px";
                } else {
                    userTips.innerText = "用户名由数字、字母、下划线组成";
                    userTips.style.color = "red";
                    userTips.style.fontSize = "12px";
                }





            } else {
                userTips.innerText = "用户名不能以数字开头";
                userTips.style.color = "red";
                userTips.style.fontSize = "12px";
            }

        } else {
            userTips.innerText = "用户名需要在6-12位之间";
            userTips.style.color = "red";
            userTips.style.fontSize = "12px";

            // border-left;
            // background-color
            // text-indent
            // font-size
        }

    }

</script>

</html>